<!-- <!DOCTYPE html>
<html>

<head>
    <title>Flexbox 布局</title>
     <link rel="stylesheet" type="text/css" href="styles.css"> 
    <style>
        /* Flex容器样式 */
        .flex-container {
            display: flex;
            /* 开启flex布局 */
            justify-content: space-around;
            /* 水平分布 */
            align-items: center;
            /* 垂直居中 */
            height: 200px;
            /* 容器高度 */
            background-color: #333;
            /* 容器背景色 */
        }

        /* Flex子项样式 */
        .flex-item {
            padding: 20px;
            margin: 10px;
            background-color: #f1f1f1;
            border: 1px solid #333;
            color: #333;
            text-align: center;
            font-size: 30px;
        }

        /* 自定义各个子项的样式 */
        .flex-item:nth-child(1) {
            flex: 1;
            /* 占据1份空间 */
        }

        .flex-item:nth-child(2) {
            flex: 2;
            /* 占据2份空间 */
        }

        .flex-item:nth-child(3) {
            flex: 1;
            /* 占据1份空间 */
        }
    </style>
</head>

<body>

    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>

</body>

</html> -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局</title>
    <!-- <link rel="stylesheet" href="../img/iconfont/定位.png"> -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            max-width: 720px;
            margin: 0 auto;
            /* x轴水平隐藏 */
            overflow-x: hidden;
            /* y轴显示 */
            overflow-y: scroll;
        }

        body {
            color: #333;
            font-size: 12px;
        }

        a {
            /* 无下划线 */
            text-decoration: none;
            color: #333;
        }

        ul li {
            /* 取消符号 */
            list-style: none;
        }

        /* 搜索栏  */
        .index-search {
            display: flex;
            width: 100%;
            margin: 5px;
        }

        i img {
            width: 20px;
            height: 20px;
        }

        .index-search input {
            flex: 0 1 75%;
            background-color: #f7f7f7;
            border: 0;
            /* 边框圆角化 */
            border-radius: 10px;
            /* 取消轮廓线 */
            outline: none;
            padding-left: 10px;
        }

        .search-item {
            flex: 0 1 25%;
            text-align: center;
        }

        /* 广告轮播图 */
        .index-banner {
            width: 100%;
            position: relative;
        }

        .index-banner img {
            width: 100%;
            height: 200px;
            border-radius: 3%;

        }

        .index-banner ul {
            display: flex;
            position: absolute;
            bottom: 10px;
            right: 20px;
            background-color: rgb(0, 0, 0, .4);
            border-radius: 7px;
            padding: 0 3px;
        }

        .index-banner ul li {
            color: #fff;
            margin: 0 1px;
        }

        /* 导航栏 */
        .index-nav {
            width: 100%;
        }

        .index-nav ul {
            display: flex;
            /* 换行 */
            flex-wrap: wrap;
            text-align: center;
        }

        .index-nav ul li {
            flex: 0 1 25%;
            margin-bottom: 10px;
        }

        .index-nav a img {
            width: 63px;
            height: 63px;
        }

        /* 秒杀 */
        .index-seckill {
            background-color: #fe6b38;
            border-radius: 3%;
            margin: 10px 0;
            padding-bottom: 10px;
        }

        .seckill-count {
            background-color: #fce5c6;
            width: 24%;
            border-top-left-radius: 10%;
            padding: 5px;
        }

        .seckill-count i,
        .seckill-count span {
            color: #fe6b38;
            font-size: 20px;
            line-height: 20px;
        }

        .seckill-time ul {
            display: flex;
            text-align: center;
            margin: 10px 10px 0 10px;
        }

        .seckill-time ul li {
            flex: 0 1 23%;
            padding: 10px 0;
        }

        .seckill-time ul li p {
            color: #fff;
            font-size: 18px;
        }

        .seckill-time ul li b {
            color: #fff;
            font-size: 10px;
            font-weight: 400;
        }

        .seckill-time li:hover {
            background-color: #faa73f;
            /* border-top-left-radius: 8px;
            border-top-right-radius: 8px; */
            /* 简写 */
            border-radius: 8px 8px 0 0;
        }

        .seckill-time li:hover b {
            background-color: #fff;
            color: red;
            border-radius: 7px;
            padding: 0 3px;
        }

        .seckill-column {
            display: flex;
            background-color: #fff;
            border: 5px solid #fef9ec;
            border-radius: 3px;
            margin: 0 10px;
        }

        .column-left img {
            max-height: 100px;

        }

        .column-left {
            position: relative;
            /* 设置内容区域大小  占1份 */
            flex: 1;
        }

        .column-right {
            /* 设置内容区域大小  占2份 */
            flex: 2;
        }

        .column-left span {
            position: absolute;
            top: 0;
            left: 0;
            background-color: #fd9639;
            color: #fff;
            padding: 0 5px;
        }

        .column-right h5 {
            font-size: 16px;
        }

        .column-right p {
            background-color: #fd9639;
            color: #fff;
            width: 42px;
            text-align: center;
            margin-top: 15px;
        }

        .column-list {
            position: relative;
        }

        .column-list i,
        .column-list b,
        .more-info i,
        .more-info b {
            font-style: normal;
            font-weight: 700;
            color: red;
        }

        .column-list s,
        .more-info s {
            color: #999;
        }

        .column-list a {
            background-color: red;
            color: white;
            border-radius: 5%;
            padding: 4px 15px;
            font-size: 16px;
            font-weight: 700;
            position: absolute;
            right: 0;
            bottom: 4px;
        }

        /* 商品展示部分 */
        .index-main {
            background-color: #f7f8f9;
            width: 100%;
            position: relative;
        }

        .index-main ul {
            display: flex;
            /* 换行 */
            flex-wrap: wrap;
            /* 两端对齐 */
            justify-content: space-between;
        }

        .index-main ul li {
            flex: 0 0 48%;
            background-color: #fff;
            /* height: 150px; */
            margin: 3px 1px;
            position: relative;
        }

        .more-img {
            text-align: center;
        }

        .more-img img {
            max-width: 100%;
            height: 150px;
        }

        .index-main-item h4 {
            /* 加粗 */
            font-weight: 700;
            height: 25px;
        }

        .index-main-item p {
            color: #999;
            height: 25px;
        }

        .index-main ul li i img {
            border: 1px solid red;
            border-radius: 50%;
            padding: 3px;
            position: absolute;
            right: 10px;
            bottom: 4px;
        }

        .index-main .more-over img {
            background-color: #0a0a0a;
        }

        .more-num {
            position: absolute;
            bottom: 23px;
            right: 8px;
            background-color: red;
            color: #fff;
            border-radius: 50px;
            padding: 0 1px;
            transform: scale(0.7);
        }

        .index-main .more-not {
            position: absolute;
            top: 38px;
            right: 107px;
            color: #fff;
            background: rgb(0, 0, 0, .4);
            border-radius: 50%;
            padding: 45px;
            font-weight: 700;
        }

        /* 页面底部 */
        /* 解决固定定位遮挡问题 ,用盒子占同高度位置 */
        .footer-seat {
            height: 55px;
        }

        .footer {
            /* 固定定位 */
            position: fixed;
            bottom: 0;
            left: 0;
            height: 55px;
            width: 100%;
            /* background-color: pink; */
        }

        .footer-lists {
            position: relative;
            height: 55px;
            max-width: 720px;
            background-color: #f3f3f3;
            margin: auto;
            border-top: 1px solid #d5d5d5;
        }

        .footer-lists ul {
            display: flex;
            height: 55px;
            text-align: center;
            /* 交叉轴对齐 垂直对齐 */
            align-items: center;
        }

        .footer-lists ul li {
            flex: 0 1 25%;
        }

        .footer-lists li i {
            font-size: 24px;
        }

        /* .footer-lists .selected i img,
        .footer-lists .selected p {
            color: red;
        } */
        .gw {
            position: relative;
        }

        .footer-lists li b {
            position: absolute;
            bottom: 34px;
            right: 77px;
            background-color: red;
            color: #fff;
            border-radius: 50px;
            padding: 0 1px;
            transform: scale(0.7);

        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 页面头部 -->
        <div class="index-header">
            <i><img src="../img/iconfont/定位.png" alt=""></i>
            <span>当前门店：</span>
            <a href="#">财源滚滚店 ></a>
        </div>
        <!-- 搜索栏 -->
        <div class="index-search">
            <input type="text" placeholder="请输入用户名" />
            <div class="search-item">
                <i><img src="../img/iconfont/更多.png" alt=""></i>
                <p>快速核销</p>
            </div>
        </div>
        <!-- 广告轮播图 -->
        <div class="index-banner">
            <img src="../img/精选商场平台.jpeg" alt="">

            <ul>
                <li>1</li>
                <li>/</li>
                <li>3</li>
            </ul>
        </div>
        <!-- 导航栏-->
        <div class="index-nav">
            <ul>
                <li>
                    <a href="#">
                        <img src="../img/新品.png" alt="">
                        <p>新品专区</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/新品.png" alt="">
                        <p>新品专区</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/新品.png" alt="">
                        <p>新品专区</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/新品.png" alt="">
                        <p>新品专区</p>
                    </a>
                </li>
                <br />
                <li>
                    <a href="#">
                        <img src="../img/新品.png" alt="">
                        <p>新品专区</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/新品.png" alt="">
                        <p>新品专区</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/新品.png" alt="">
                        <p>新品专区</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../img/新品.png" alt="">
                        <p>新品专区</p>
                    </a>
                </li>
            </ul>
        </div>
        <!-- 秒杀 -->
        <div class="index-seckill">
            <div class="seckill-count">
                <i><img src="../img/iconfont/限时秒杀.png" alt=""></i>
                <span>限时秒杀</span>
            </div>
            <div class="seckill-time">
                <ul>
                    <li>
                        <p>0:00</p>
                        <b>抢购中</b>
                    </li>
                    <li>
                        <p>10:00</p>
                        <b>抢购中</b>
                    </li>
                    <li>
                        <p>14:00</p>
                        <b>抢购中</b>
                    </li>
                </ul>
            </div>
            <div class="seckill-column">
                <div class="column-left">
                    <a href="#">
                        <img src="../img/iconfont/秘密礼物.png" alt="" />
                        <span>秒杀</span>
                    </a>
                </div>
                <div class="column-right">
                    <h5><a href="#">更多好物，尽情期待</a></h5>
                    <p>秒杀价</p>
                    <div class="column-list">
                        <i>￥</i>
                        <b>???</b>
                        <s>￥???</s>
                        <a href="#">立即抢购</a>
                    </div>
                </div>

            </div>
        </div>
        <!-- 商品展示部分 -->
        <div class="index-main">
            <ul>
                <li>
                    <a href="#" class="index-main-item">
                        <div class="more-img">
                            <img src="../img/iconfont/盲盒.png" alt="">
                        </div>
                        <h4>优质物品</h4>
                        <p>尽情期待</p>
                        <div class="more-info">
                            <i>￥</i>
                            <b>???</b>
                            <s>￥???</s>
                        </div>
                    </a>
                    <i><img src="../img/购物车.png" alt=""></i>
                </li>
                <li>
                    <a href="#" class="index-main-item">
                        <div class="more-img">
                            <img src="../img/iconfont/盲盒.png" alt="">
                        </div>
                        <h4>优质物品</h4>
                        <p>尽情期待</p>
                        <div class="more-info">
                            <i>￥</i>
                            <b>???</b>
                            <s>￥???</s>
                        </div>
                    </a>
                    <i><img src="../img/购物车.png" alt=""></i>
                </li>
                <li>
                    <a href="#" class="index-main-item">
                        <div class="more-img">
                            <img src="../img/iconfont/盲盒.png" alt="">
                        </div>
                        <h4>优质物品</h4>
                        <p>尽情期待</p>
                        <div class="more-info">
                            <i>￥</i>
                            <b>???</b>
                            <s>￥???</s>
                        </div>
                    </a>
                    <i><img src="../img/购物车.png" alt=""></i>
                </li>
                <li>
                    <a href="#" class="index-main-item">
                        <div class="more-img">
                            <img src="../img/iconfont/盲盒.png" alt="">
                        </div>
                        <h4>优质物品</h4>
                        <p>尽情期待</p>
                        <div class="more-info">
                            <i>￥</i>
                            <b>???</b>
                            <s>￥???</s>
                        </div>
                    </a>
                    <i><img src="../img/购物车.png" alt=""></i>
                    <p class="more-num">0</p>
                </li>
                <li>
                    <a href="#" class="index-main-item">
                        <div class="more-img">
                            <img src="../img/iconfont/盲盒.png" alt="">
                        </div>
                        <h4>优质物品</h4>
                        <p>尽情期待</p>
                        <div class="more-info">
                            <i>￥</i>
                            <b>???</b>
                            <s>￥???</s>
                        </div>
                    </a>
                    <i class="more-over"><img src="../img/购物车.png" alt=""></i>
                    <p class="more-not">待开发</p>
                </li>
            </ul>
        </div>
        <!-- 页面底部-->
        <!-- 解决固定定位遮挡问题 -->
        <div class="footer-seat"></div>
        <div class="footer">
            <div class="footer-lists">
                <ul>
                    <li class="selected">
                        <a href="#">
                            <i><img src="../img/iconfont/shouye.png" alt=""></i>
                            <p>首页</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i><img src="../img/iconfont/分类.png" alt=""></i>
                            <p>分类</p>
                        </a>
                    </li>
                    <li >
                        <a href="#" class="gw">
                            <i><img src="../img/iconfont/购物车.png" alt=""></i>
                            <p>购物车</p>
                            <b>0</b>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i><img src="../img/iconfont/我的.png" alt=""></i>
                            <p>我的</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>


    </div>

</body>

</html>